<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>选择器练习</title>

    <style>
        #li {
            color: green
        }

        .cl {
            color: yellow
        }

        input[type="text"], body > p {
            background-color: red
        }

        body > div > div > p {
            color: pink
        }

        .p1 {
            background-color: yellow
        }

        a:link {
            color: green
        }

        a:visited {
            color: red
        }

        a:hover {
            color: yellow
        }

        a:active {
            color: pink
        }
    </style>
</head>


<body>
<ul>
    <li>刘备</li>
    <li id="li">关羽</li>
    <li class="cl">张飞</li>
</ul>

<p>香蕉</p>
<p class="cl">苹果</p>

<input type="text">
<input type="password">

<div>
    <p>p1</p>
    <div>
        <P class="p1">p2</P>
    </div>
    <div>
        <div>
            <p class="p1">p3</P>
        </div>
    </div>
    <div>
        <div>
            <p>555555</p>
        </div>
    </div>
</div>

<a href="http://www.youku.com">优酷</a>
</body>
</html>